<template>
  <el-dialog
    top="80px"
    width="620px"
    title="项目附件（推荐函）"
    append-to-body
    :close-on-click-modal="false"
    :visible.sync="visible"
    :before-close="beforeClose"
  >
    <div v-if="viewMode">
      <div class="empty-wrap" v-if="!attachList.length">暂无附件（推荐函）</div>
      <attach-list v-else :attath-data="viewList" :show-label="false"></attach-list>
    </div>

    <div v-else>
      <upload-oss
        multiple
        ref="attachUpload"
        :dir="dir"
        :file-name="0"
        :file-list="attachList"
        :on-complete="handleAttachComplete"
      ></upload-oss>

      <div class="text-center mt-5">
        <el-button type="primary" class="btn-long" :loading="loading" @click="handleRecommend">
          保存
        </el-button>
        <el-button class="btn-long" :disabled="loading" @click="beforeClose">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { arrayToString, arrayFromString, tuid } from '@vimi/utils-tool'
import { attachAdapter } from '@/bank/components/attach/index'

import AttachList from '@/bank/components/attach/List'

export default {
  components: {
    AttachList,
  },
  props: {
    visible: Boolean,
    viewMode: Boolean,
    batchData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      loading: false,
      dir: '',
      attachList: [],
      viewList: [],
    }
  },
  computed: {
    id() {
      return this.batchData.customer_related_quick_batch_id
    },
  },
  watch: {
    batchData: {
      handler: function (val) {
        this.initData(val)
      },
      immediate: true,
      deep: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    beforeClose() {
      this.$emit('update:visible', false)
    },

    initData(val) {
      this.attachList = []
      if (!this.id) {
        return
      }
      this.attachList = arrayFromString(val.attachment).map(it => attachAdapter({ attachment: it }))
      this.viewList = [
        {
          tag: '',
          attachs: this.attachList,
        },
      ]
      const attachId =
        (this.attachList.length ? this.attachList[0].url.replace(/^.*\/(.*)\/.*$/, '$1') : '') ||
        tuid()
      this.dir = `bank/rec/${attachId}`
    },

    handleRecommend() {
      if (!this.id) {
        return this.$message.error('没有批次号，不能上传！')
      }
      this.loading = true
      this.$refs.attachUpload.submit()
    },

    handleAttachComplete(files) {
      const attachment = arrayToString(files.map(it => it.url))
      this.handleSubmit(attachment)
    },

    handleSubmit(attachment) {
      this.$api
        .updateData({
          table: 'customer_related_quick_batch',
          id: this.id,
          data: {
            attachment,
          },
        })
        .then(res => {
          this.$message.success('保存成功')
          this.$emit('success', res)
          this.beforeClose()
        })
        .catch(err => {
          this.$message.success('保存失败')
          throw new Error(err)
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
}
</script>

<style lang="scss" scoped></style>
